
# Images & Icons

The `apps/[app]/assets.js` includes all images. Wingsuit will compile these files to `[dist]/assets/images`.

### Embedding images in Drupal Twig
You can use the `ws-assets` stream wrapper to get a path to the asset folder. Ensure you have the [wingsuit_companion](https://www.drupal.org/project/wingsuit_companion) module enabled.

<b>Sample Twig file with an image:</b>

```twig
<img src="{{ file_create_url('ws-assets://images/dummy.png') }}"/>
```
or use the image component
```twig
{% include "@atoms/image/image.wig" with {path: "images/dummy.png" }
```
### Image in CSS
To use images inside your CSS file, use the relative path to the image. Webpack will replace it with the correct output path.

### Placeholder images
Wingsuit supports image styles and responsive image styles for placeholder images in storybook.

You can configure your image styles in your `placeholder.wingsuit.yml`

Sample `placeholder.wingsuit.yml`
```yaml
imageConfig:
  styles:
    1x1_xxs:
      label: Small 1x1
      width: 80
      height: 80
    ......
  stylesResponsive:
    card-hero:
      style: 16x9_xs_sc
      breakpoints:
        xxs: 8x7_xxs_sc
        xs: 8x7_xs_sc
    ......
  breakpoints:
   xxs:
     mediaQuery: '(min-width: 0px) and (max-width: 459px)'
   xs:
     mediaQuery: '(min-width: 460px) and (max-width: 639px)'

```

#### Basic image styles
Here you can define your basic image dimensions. If you define both width and height the image will be cropped.
If you define only width the height will be resized to maintain the aspect ratio of the image, and vice versa.
#### Breakpoints
Under breakpoints you can define media queries which are used by responsive image styles.
#### Responsive image styles
If you use a responsive image the placeholder component will generate a picture tag with a source for each breakpoint.
This is done by a twig macro. You can find everything inside the placeholder component.

## Referencing a placeholder inside wingsuit.yml.
You can use your placeholder by referencing the placeholder image in your wingsuit.yml

```yaml
image:
  label: Image
  type: pattern
  preview:
    id: placeholder
    variant: image
    settings:
      style: card
```
Example from `@molecules/card`.

## Using inside a presenter template.
To render an image style in a presenter template.
Image style works for simple image styles and responsive image styles.
